<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="mytag" uri="/WEB-INF/tld/self/self-taglib.tld" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script src="${pageContext.request.contextPath}/common/js/jquery-1.7.1.js" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/common/js/jquery.autocomplete.js" type="text/javascript"></script>
  
  <style type="text/css">
  .search_suggest {
	    background-color: #FFFFFF;
	    border: 1px solid black;
	    clear: both;
	    left: 0;
	    margin: 0;
	    padding: 0;
	    position:absolute;
	}
	.suggest_hidden {
	    clear: both;
	    display: none;
	}

  	.item_high {
	    background-color: #326BC5;
	    color: white;
	    padding-top: 2px;
	    width: 100%;
	}
	.item_normal {
	    overflow-x: hidden;
	    padding-top: 2px;
	    width: 100%;
	}
	.suggest_left {
	    float: left;
	}
	.suggest_right {
	    float: right;
	}
  </style>
  
  <script type="text/javascript">
  //left
	function pageX(elem)
	{
		return elem.offsetParent?elem.offsetLeft+pageX(elem.offsetParent):elem.offsetLeft;
	}
	//top
	function pageY(elem)
	{
		return elem.offsetParent?elem.offsetTop+pageY(elem.offsetParent):elem.offsetTop;
	}
  
  
  	$(function(){
  		var childs=$("#result_div").children("DIV");
  		for(var i=0;i<childs.length;i++){
			$(childs[i]).bind("mouseover",function(){
				$(this).attr('class','item_high');
			});
			$(childs[i]).bind("mouseout",function(){
				$(this).attr('class','item_normal');
			});
  		}
  		
  		var search=$("#search");
  		var searchX=pageX(search.get(0));
  		var searchY=pageY(search.get(0))+21;
  		
  		var result_div=$("#result_div");
  		
  		search.bind("click",function(){
	  			result_div.css("left",searchX);
	  			result_div.css("top",searchY);
  		});
  		
  	});
  
  </script>
  </head>
  
  <body>
    This is my JSP page. <br>
    mytag:helloWorld : <mytag:helloWorld/><br>
    
    mytag:repeat : 
     <mytag:repeat num="5">
      Invocation ${count} of 5 &nbsp;&nbsp;
    </mytag:repeat>
    
    <br>
    <br>
    <br>
    
    <table>
    	<tr>
    		<td>搜索：</td>
    		<td>
				    <input id="search" type="text" 
						        onblur="if(this.value==''){this.value='请输入关键字';}" 
						        onfocus="if(this.value=='请输入关键字'){this.value='';}" 
						        value="请输入关键字" 
						        maxlength="50" style="width: 287px;">
    		</td>
    	</tr>
    	<tr>
    		<td>aaaaa</td>
    		<td>aaaa</td>
    	</tr>
    </table>
    
    
    
   <div id="result_div" class="search_hidden" style="overflow-y: scroll; overflow-x: hidden; height: 100px; padding-right: 16px; margin-left: 0px; width: 287px;">
		<iframe frameborder="0" style="position: absolute; width: 100%; z-index: -1; border: 0px none; height: 100px;">
			<html>
				<head></head>
				<body></body>
			</html>
		</iframe>
		<div class="item_normal" value="苏州世茂广场" valuetext="苏州世茂广场" style="width: 287px; overflow: hidden;">
			<span class="suggest_left">苏州世茂广场</span>
			<span class="suggest_right"></span>
		</div>
		<div class="item_normal" value="世茂运河城" valuetext="世茂运河城" style="width: 287px; overflow: hidden;">
			<span class="suggest_left">世茂运河城</span>
			<span class="suggest_right"></span>
		</div>
		<div class="cancel">取消</div>
	</div>

  </body>
</html>
